<template>
    <div>
        <h2>用户登录</h2>
        <div>
            <input type="text" placeholder="用户名" v-model="username">
            <button @click="login">登录</button>
        </div>
    </div>
</template>
<script>
export default {
    name: "LoginView",
    data() {
        return {
            username: 'admin'
        }
    },
    methods: {
        login() {
            this.$store     //组件文件中访问store，不需要引入（import store from "./store"）
             //'user/login'‌：表示在名为 user 的 Vuex 模块中定义了一个名为 login 的 action。
             //使用命名空间（namespace）管理模块时需用斜杠 / 分隔模块名和 action 名。
                .dispatch('user/login', {username:this.username})   //触发名为 user/login 的 Vuex action，提交登录请求。
                .then(() => {
                    //登录成功后，跳转到登录前访问的页面，如果没有访问页面，则跳转到首页。
                    //若 URL 中存在 ?redirect=/target 查询参数，则跳转到 /target 页面；否则跳转到首页 /
                    this.$router.push({path: this.$route.query.redirect ||'/'})
                })
                .catch(error=>{
                    alert(error)
                })
        }
    }
}
</script>